<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
  <link href="../css/webim_demo.css" rel="stylesheet" type="text/css">
  <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="../css/friends.css">
  <script src="../js/jquery-3.3.1.js"></script>
  <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
  <script src="../jss/lib/jquery/jquery-ui.js" type="text/javascript"></script>
  <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap-table.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap-collapse.js" type="text/javascript"></script>
  <script src="../jss/lib/xss.js" type="text/javascript"></script>
</head>
<style>
.submit{
 width: 40px;
 height: 25px;
 color: #fff;
 text-align: center;
 line-height: 25px;
 font-size: 14px;
 background: #54cae8;
 border-radius: 3px;
 display: none;
}
.clearfix:after{
 content: '';
 display: block;
 clear: both;
}

.fl{
 float: left;
}
.fr{
 float: right;
}
.content2{
 background: #fff;
 border-radius: 30px;
 position: relative;
 padding: 10px 15px;
 margin-right: 5%;
 max-width: 180px;
 word-break: break-all;
}
.info_wrap{
 position: fixed;
 width: 100%;
 height: 80%;
 overflow: auto;
}
</style>
<body>
  <header>
     <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
     <div class="center title">小静静</div>
 </header>

 <div class="flex report">
     <div class="flex">
        <img src="../img/rep.png">
        <p>举报用户</p>
    </div>
    <div class="flex add_fiends">
        <img src="../img/addu.png">
        <p>添加好友</p>
    </div>
</div>
<div class="info_wrap msgflow">
			<!-- <div class="">
				<p class="center data">04-09 <span>16:20</span></p>
				<div class="user flex">
					<img src="../img/logo.png" height="50px">
					<div class="content" style="max-width: 180px">老铁asdasdasdasd，周末爬山去吗</div>
				</div>
			</div>
			<div>
				<p class="center data">04-09 <span>16:20</span></p>
				<div class="user clearfix">
					<img class="fr" src="../img/logo.png" height="50px">
					<div class="content2 fr">老铁，asdasdadassd周末爬山去吗</div>
				</div>
			</div> -->
		</div>

		<footer>
			<div class="flex">
				<div class="import">
					<input type="text" id="" class="info" name="" placeholder="请输入消息">
					<span class="box">
						<img src="../img/smile.png" class="smile">
						<img src="../img/smile-s.png">
					</span>
				</div>
				<div class="add">+</div>
				<div class="submit">发送</div>
			</div>
			<div class="emoji">
				<div class="flex emoji-p">
					<div><img src="../img/1.png"></div>
					<div><img src="../img/2.png"></div>
					<div><img src="../img/3.png"></div>
					<div><img src="../img/4.png"></div>
					<div><img src="../img/5.png"></div>
					<div><img src="../img/6.png"></div>
					<div><img src="../img/7.png"></div>
					<div><img src="../img/8.png"></div>
					<div><img src="../img/9.png"></div>
					<div><img src="../img/10.png"></div>
					<div><img src="../img/11.png"></div>
					<div><img src="../img/12.png"></div>
					<div><img src="../img/13.png"></div>
					<div><img src="../img/14.png"></div>
					<div><img src="../img/15.png"></div>
					<div><img src="../img/16.png"></div>
					<div><img src="../img/17.png"></div>
					<div><img src="../img/18.png"></div>
					<div><img src="../img/19.png"></div>
					<div><img src="../img/20.png"></div>
					<div><img src="../img/21.png"></div>
					<div class="flex emoji-r">
						<img src="../img/cancle.png">
						<p class="send">发送</p>
					</div>
				</div>
			</div>
			<div class="addcon flex">
				<div>
					<img src="../img/c1.png">
					<p>语音通话</p>
				</div>
				<div>
					<img src="../img/c2.png">
					<p>视频聊天</p>
				</div>
				<div>
					<img src="../img/c3.png">
					<p>照片/视频</p>
				</div>
				<div>
					<img src="../img/c4.png">
					<p>发送位置</p>
				</div>
				<div>
					<a href="../html/r-package.html">
						<img src="../img/c5.png">
						<p>发红包</p>
					</a>
				</div>
			</div>
		</footer>

		<!-- <div class="userSig" style="opacity: 0;position: absolute;left: 0;top: 0"></div> -->
	</body>
    </html>
    <script src="https://tls.qcloud.com/libs/api.min.js" type="text/javascript"></script>
  <!--用于获取文件MD5 js api(发送图片时用到)-->

  <script src="../jss/lib/md5/spark-md5.js" type="text/javascript"></script>
  <!--web im sdk-->

  <script src="../sdk/webim.js" type="text/javascript"></script>
  <!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->

  <script src="../sdk/json2.js" type="text/javascript"></script>
  <!--web im sdk 登录 示例代码-->

  <script src="../jss/login/login.js" type="text/javascript"></script>
  <!--web im sdk 登出 示例代码-->

  <script src="../jss/logout/logout.js" type="text/javascript"></script>
  <!--web im 解析一条消息 示例代码-->

  <script src="../jss/common/show_one_msg.js" type="text/javascript"></script>
  <!--web im demo 基本逻辑-->

  <script src="../jss/base.js" type="text/javascript"></script>
  <!--web im sdk 资料管理 api 示例代码-->

  <script src="../jss/profile/profile_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友管理 api 示例代码-->

  <script src="../jss/friend/friend_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友申请管理 api 示例代码-->

  <script src="../jss/friend/friend_pendency_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友黑名单管理 api 示例代码-->

  <script src="../jss/friend/friend_black_list_manager.js" type="text/javascript"></script>
  <!--web im sdk 最近联系人 api 示例代码-->

  <script src="../jss/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
  <!--web im sdk 群组管理 api 示例代码-->

  <script src="../jss/group/group_manager.js" type="text/javascript"></script>
  <!--web im sdk 群成员�����理 api 示例代码-->

  <script src="../jss/group/group_member_manager.js" type="text/javascript"></script>
  <!--web im sdk 加群申请管理 api 示例代码-->

  <script src="../jss/group/group_pendency_manager.js" type="text/javascript"></script>
  <!--web im 切换聊天好友或群组 示例代码-->

  <script src="../jss/switch_chat_obj.js" type="text/javascript"></script>
  <!--web im sdk 获取c2c获取群组历史消息 示例代码-->

  <script src="../jss/msg/get_history_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送普通消息(文本和表情) api 示例代码-->

  <script src="../jss/msg/send_common_msg.js" type="text/javascript"></script>
  <!--web im sdk 上传和发送图片消息 api 示例代码-->

  <script src="../jss/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
  <!--web im sdk 上传和发送文件消息 api 示例代码-->

  <script src="../jss/msg/upload_and_send_file_msg.js" type="text/javascript"></script>
  <!--web im sdk 切换播放语音消息 示例代码-->

  <script src="../jss/msg/switch_play_sound_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送自定义消息 api 示例代码-->

  <script src="../jss/msg/send_custom_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送群自定义通知 api 示例代码-->

  <script src="../jss/msg/send_custom_group_notify_msg.js" type="text/javascript"></script>
  <!--web im 监听新消息(c2c或群) 示例代码-->

  <script src="../jss/msg/receive_new_msg.js" type="text/javascript"></script>
  <!--web im 监听群系统通知消息 示例代码-->

  <script src="../jss/msg/receive_group_system_msg.js" type="text/javascript"></script>
  <!--web im 监听好友系统通知消息 示例代码-->

  <script src="../jss/msg/receive_friend_system_msg.js" type="text/javascript"></script>
  <!--web im 监听资料系统通知消息 示例代码-->

  <script src="../jss/msg/receive_profile_system_msg.js" type="text/javascript"></script>


  <script src="../jss/lib/BenzAMRRecorder.js" type="text/javascript"></script>
  <!-- web im 让h5支持播放amr录音文件 -->

  <script type="text/javascript">
    // 将以下两个参数替换成您的配置
    var sdkAppID = '1400204816'; // 填写第一步获取到的 sdkappid
    //var accountType = ''; // 填写第二步设置账号体系集成获取到的 accountType , 已废弃

    // 登录帐号
    var identifier = 'xhs', // 填写第三步输入的 identifier，由您指定，可以在登录页面直接输入
        userSig = 'eJw1j1FvgjAURv8Lry7LLRQwJnsgWw0m4NSJ21uDtspFhK4WBZf997kGH*85D9*5P846*XjOlULBc8M9LZyJA86TxbJTqCXP90bqOya*77sAD4tC1gb3aF1XnAd8xsP9Tln2OmNTvf7Kvg-XZPN5UcHCC6ZkNTfRLI0grd*8Nq5YQbZF72YRssiQLglv7*XoSOYlLhsWN7etjKleAdXhqK0up3FVbkSv6ctjTBy5jf-PowAu0DEJBmnwJG12AKFPvZAOPN-tmrY23PRK2m9--wCISE*l'; //填写第三步生成的userSig，可以在登录页面直接输入

    //帐号模式，0-表示独立模式，1-表示托管模式(托管模式已经停用，请使用独立模式集成帐号)
    var accountMode = 0;
    
    //当前用户身份
    var loginInfo = {
      'sdkAppID': sdkAppID, //用户所属应用id,必填
      // 'accountType': accountType, //用户所属应用帐号类型，必填 , 已废弃
      'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
      'userSig': userSig,
      //当前用户身份凭证，必须是字符串类型，必填
      'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
      'headurl': 'img/me.jpg' //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
    };

    var AdminAcount = 'qwe101';
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = 'dengshilin'; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义

    var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。

    //默认好友头像
    var friendHeadUrl = 'img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
    //默认群头像
    var groupHeadUrl = 'img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况


    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


    var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
    var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

    var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
    var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

    var emotionFlag = false; //是否打开过表情选择框

    var curPlayAudio = null; //当前正在播放的audio对象

    var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
    var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

    var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到

    //监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
    var onGroupSystemNotifys = {
      "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
      "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
      "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
      "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
      "5": onDestoryGroupNotify, //群被解散(全员接收)
      "6": onCreateGroupNotify, //创建群(创建者接收)
      "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
      "8": onQuitGroupNotify, //主动退群(主动退出者接收)
      "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收)
      "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
      "11": onRevokeGroupNotify, //群已被回收(全员接收)
      "15": onReadedSyncGroupNotify, //群消息已读同步通知
      "255": onCustomGroupNotify, //用户自定义通知(默认全员接收)
      "12": onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
    };

    //监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
    var onFriendSystemNotifys = {
      "1": onFriendAddNotify, //好友表增加
      "2": onFriendDeleteNotify, //好友表删除
      "3": onPendencyAddNotify, //未决增加
      "4": onPendencyDeleteNotify, //未决删除
      "5": onBlackListAddNotify, //黑名单增加
      "6": onBlackListDeleteNotify //黑名单删除
    };

    var onC2cEventNotifys = {
      "92": onMsgReadedNotify, //消息已读通知,
      "96": onMultipleDeviceKickedOut
    };

    //监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
    var onProfileSystemNotifys = {
      "1": onProfileModifyNotify //资料修改
    };

    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
      var info;
      switch (resp.ErrorCode) {
        case webim.CONNECTION_STATUS.ON:
          webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
          break;
        case webim.CONNECTION_STATUS.OFF:
          info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        case webim.CONNECTION_STATUS.RECONNECT:
          info = '连接状态恢复正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        default:
          webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
          break;
      }
    };

    //IE9(含)以下浏览器用到的jsonp回调函数
    function jsonpCallback(rspData) {
      webim.setJsonpLastRspData(rspData);
    }

    //监听事件
    var listeners = {
      "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
        ,
      "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
        ,
      "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
        ,
      "onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
        ,
      "onGroupSystemNotifys": onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填
        ,
      "onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填
        ,
      "onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
        ,
      "onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
        ,
      "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
        ,
      "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
        ,
      "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
        ,
      "onLongPullingNotify": function (data) {
        console.debug('onLongPullingNotify', data)
      }
    };

    var isAccessFormalEnv = true; //是否访问正式环境

    var isLogOn = false; //是否开启sdk在控制台打印日志

    //初始化时，其他对象，选填
    var options = {
      'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
      'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
    }



    var msgflow = document.getElementsByClassName("msgflow")[0];
    var bindScrollHistoryEvent = {
      init: function () {
        msgflow.onscroll = function () {
          if (msgflow.scrollTop == 0) {
            msgflow.scrollTop = 10;
            if (selType == webim.SESSION_TYPE.C2C) {
              getPrePageC2CHistoryMsgs();
            } else {
              getPrePageGroupHistoryMsgs();
            }

          }
        }
      },
      reset: function () {
        msgflow.onscroll = null;
      }
    };
    // webimLogin();
    // $('#select_app_dialog').modal('show');
    $('#login_dialog').modal('show');

  </script>